.animation {
  margin-top: 12px;
  width: 40px;
  height: 40px;
  background: #000;
  animation: myfirst 5s infinite;
}

@keyframes myfirst {
  0% {
    background: red;
  }
  25% {
    background: yellow;
  }
  50% {
    background: blue;
  }
  100% {
    background: green;
  }
}

/* 定义关键帧 */
@keyframes bounce {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(300px);
  }
  100% {
    transform: translateX(0);
  }
}

/* 应用动画 */
.box {
  margin-top: 12px;
  width: 100px;
  height: 100px;
  background: red;
  /* 简写：名称 持续时间 速度曲线 播放次数 方向 填充模式 */
  animation: bounce 1s ease-in-out infinite alternate forwards;
}

/* 悬停暂停动画 */
.box:hover {
  animation-play-state: paused;
}

.box2 {
  position: absolute;
  margin-top: 12px;
  width: 100px;
  height: 100px;
  background: red;
  animation: myfirst2 5s infinite;
}
@keyframes myfirst2 {
  0% {
    background: red;
    right: 0px;
    top: 0px;
  }
  25% {
    background: yellow;
    right: 200px;
    top: 0px;
  }
  50% {
    background: blue;
    right: 200px;
    top: 200px;
  }
  75% {
    background: green;
    right: 0px;
    top: 200px;
  }
  100% {
    background: red;
    right: 0px;
    top: 0px;
  }
}
